<template>
    <div>
        <van-nav-bar title="支付订单" left-text="返回" left-arrow @click-left="onClickLeft" />
    </div>
    <van-tabs v-model:active="active" @click-tab="onClickTab">
        <van-tab title="支付成功" name="1"></van-tab>
        <van-tab title="支付中" name="0"></van-tab>
        <van-tab title="支付失败" name="2"></van-tab>
        <van-tab title="退款" name="3"></van-tab>
    </van-tabs>
    <div style="margin-left: 12px;" v-for="payrder in payOrderList" :key="payrder.id" v-show="payOrderDivShow">
        <br>
        <div style="font-size: var(--van-tab-font-size);font-weight: 100;">
            <span>订单号：</span><span style="font-size: 12px">{{ payrder.orderNo }}</span>
        </div>
        <div style="font-size: var(--van-tab-font-size);margin-top: 3px;">
            <span>订单金额： {{ payrder.totalAmount }}</span>
            <span style="font-size: var(--van-tab-font-size);"> RMB</span>
        </div>
        <div style="font-size: var(--van-tab-font-size);margin-top: 3px;"><span>支付时间： {{ payrder.payTime }}</span></div>
        <div> 
            <span style="font-size: var(--van-tab-font-size);margin-top: 3px;">实际付款金额：
                <span style="font-size: var(--van-tab-font-size);color: red;"> {{ payrder.actualAmount }}</span>
                <span style="font-size: var(--van-tab-font-size);color: red;"> RMB</span>
            </span>
        </div>
        <div style="margin-top: 10px;" v-show="payrder.payStatus == 1">
            <van-button size="small" @click="refund(payrder.id)">退款</van-button>
          </div>
    </div>
</template>
<script setup>
import { ref } from 'vue'
import {PayOrderList, PayRefund} from '@/api/pay.js'
import {showToast} from "vant";
const onClickLeft = () => history.back();
const payOrderDivShow = ref(true);

const payOrderList = ref([]);

const onClickTab = ({ name }) => getPayrderList(name);

var queryM = ref({
    status: 1,
    currentPage: 1,
    pageSize: 20
})

getPayOrderListInit();
function getPayOrderListInit() {
    payOrderDivShow.value = true;
    PayOrderList(queryM.value)
        .then(res => {
            if (res.data.code === 200000) {
                payOrderList.value = res.data.data.data
            }  
        })
}
function getPayrderList(data) {
    queryM.value.status=data
    payOrderDivShow.value = true;
    PayOrderList(queryM.value)
        .then(res => {
            if (res.data.code == 200000) {
                payOrderList.value = res.data.data.data
            }  
        })
}

function refund(data) {
  PayRefund(data).then(res => {
    if (res.data.code === 200000) {
      showToast('退款成功')
      getPayOrderListInit();
    } else {
      showToast(res.data.message)
    }
  }).catch(() => {
    showToast('退款失败')
  })
}
</script>